<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>常用对象 - JavaScript</title>
</head>
<body>
    <h1>常用对象</h1>
    <h4>学习目标</h4>
    <ol>
        <li>熟悉Array对象常用的方法和属性</li>
        <li>熟悉Date对象常用的方法和属性</li>
        <li>熟悉Number对象常用的方法和属性</li>
        <li>熟悉String对象常用的方法和属性</li>
        <li>熟悉Math对象常用的方法和属性</li>
        <li>了解RegExp对象常用的方法和属性</li>
    </ol>

    <script type="text/javascript">

        // -----------------------------
        // 1. Array 对象
        // -----------------------------
        /*
            常用方法：
                join()      // 把数组的所有元素放入一个字符串。
                pop()       // 删除数组的最后一个元素并返回删除的元素。
                push()      // 向数组的末尾添加一个或更多元素，并返回新的长度。
                reverse()   // 反转数组的元素顺序。
                sort()      // 对数组进行排序
         */
        // 1.1 将数组：["world", "Hello"]进行翻转。
        //      翻转完成后依次输出数组里的内容，并用空格进行分隔。
        // 1.2 对数组：[1, 2, 11, 20, 5] 进行排序，由数字从大到小排序。

        // -----------------------------
        // 2. Date 对象
        // -----------------------------
        /*
            创建时间对象：
                new Date(); // 获取当前时间对象
                new Date(时间字符串); // 获取指定时间字符串的时间对象
            常用方法：
                getFullYear() // 从 Date 对象以四位数字返回年份。
                getMonth() // 	从 Date 对象返回月份 (0 ~ 11)。
                getDate() // 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
                getHours() // 返回 Date 对象的小时 (0 ~ 23)。
                getMinutes() // 返回 Date 对象的分钟 (0 ~ 59)。
                getSeconds() // 返回 Date 对象的秒数 (0 ~ 59)。

                getTime() // 返回 1970 年 1 月 1 日至今的毫秒数。
         */
        // 2.1 显示当前的时间：年-月-日 小时:分钟:秒。
        // 2.2 获取当前的时间戳。
        // 2.3 由用户输入一个时间字符串，判断字符串是否是一个合理的时间格式。


        // -----------------------------
        // 3. Number 对象
        // -----------------------------
        /*
            常用方法：
                toFixed() // 把数字转换为字符串，结果的小数点后有指定位数的数字。
         */
        // 3.1 服务端返回了如下商品数据:
        //       [
        //           {id: 1, name: "苹果", price: 5},
        //           {id: 2, name: "香蕉", price: 2.5},
        //           {id: 3, name: "火龙果", price: 6},
        //           {id: 4, name: "车厘子", price: 78},
        //       ]
        //     将如上商品数据追加到表格，价格显示类似这样的格式：￥5.0元


        // -----------------------------
        // 4. String 对象
        // -----------------------------
        /*
            常用属性：
                length // 字符串的长度

            常用方法：
                indexOf() // 返回某个指定的字符串值在字符串中首次出现的位置
                replace() // 在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串
                substr() // 从起始索引号提取字符串中指定数目的字符
                substring() // 提取字符串中两个指定的索引号之间的字符
                toUpperCase() // 把字符串转换为大写
                toLowerCase() // 把字符串转换为小写
                trim() // 去除字符串两边的空白
         */
        // 4.1 设计一个用户名输入框，用户名只允许英文字符，大小写均可，填写完成后对用户名进行验证。
        // 4.2 设计一个关键词输入框，用英文逗号分隔每个关键词，
        //      输入完毕后，将其中中文逗号替换成英文逗号。
        // 4.3 参考上例，判断是否输入了关键词，如果没有关键词，提示需要输入关键词。
        // 4.4 上面replace只能替换找到的第一个，给String对象增加一个方法，可以替换匹配的字符串。
        // 4.5 设计一个文本输入框，输入完毕后，自动移除字符串两边的空白。


        // -----------------------------
        // 5. Math 对象
        // -----------------------------
        /*
            常用方法：
                abs() // 返回绝对值。
                ceil() // 对数进行上舍入。
                floor() // 对数进行下舍入。
                max() // 返回最高值。
                min() // 返回最低值。
                pow() // 求幂
                random() // 返回介于 0（包含） ~ 1（不包含） 之间的一个随机数
                round() // 四舍五入
         */
        // 5.1 有一个奖品数组：[
        //          "变频滚筒洗衣机",  "iphone 12",
        //          "谢谢参与",
        //          "泡鸭爪50包", "龙岩花生5斤", "百草园大礼包", "三只松鼠大礼包"
        //          "满100减10元券",
        //          "爱奇艺会员1个月", "优酷会员1个月", "百度云盘会员1个月"
        //      ]
        //      实现一个简单的抽奖，可以抽中其中一个商品。
        // 5.2 参考上例，不同奖品的中奖概率可以设置，完成抽奖功能。
        // 5.3 给Math对象设计一个随机数的方法，可以随机从0到n的整数。


        // ----------------------------------------------------
        // -- 练习
        // ----------------------------------------------------
        // 1. 查询菜鸟手册网站，分别查找出Array、Date、Number、String、Math对象地址。
        // 2. 每次要输出一个格式化的时间，都需要写一遍代码，
        //      尝试给Date时间对象增加一个格式化显示的方法，其中包含一个参数表示显示的时间格式。
        //      形如: format("年-月-日 小时-分钟-秒")，方法返回该格式的时间字符串
        // 3. 参考抽奖页面，实现抽奖的功能。

    </script>
</body>
</html>